window.addEventListener('load', function() {
	//1.获取元素
	var focus = document.querySelector('.focus');
	var ul = focus.children[0];
	var ol = focus.children[1];

	//获得focus的宽度
	var focusWidth = focus.offsetWidth;

	//2.利用定时器自动轮播图片
	var index = 0;
	var timer = setInterval(function() {
		index++;
		var translateX = -index * focusWidth;
		ul.style.transform = 'translateX(' + translateX + 'px)';
		ul.style.transition = 'all .3s';
	}, 2000);

	//当动画过渡完成后,才执行事件
	ul.addEventListener('transitionend', function() {
		if (index >= ul.children.length - 2) {
			index = 0;
			ul.style.transition = 'none'; //如果是最后一张图(也就是第一张图,则取消动画效果)
			var translateX = -index * focusWidth;
			ul.style.transform = 'translateX(' + translateX + 'px)';
		} else if (index < 0) {
			index = ul.children.length - 3;
			ul.style.transition = 'none';
			var translateX = -index * focusWidth;
			ul.style.transform = 'translateX(' + translateX + 'px)';
		}

		//小圆点跟随变化
		//把ol里面li带有current类名的选出来并去除
		ol.querySelector('.current').classList.remove('current');
		//让当前索引好的小li加上current 
		ol.children[index].classList.add('current');
	});

	//手指滑动轮播图
	//触摸元素 touchstart: 获取手指初始坐标
	var startX = 0;
	var moveX = 0;
	var flag = false;

	ul.addEventListener('touchstart', function(e) {
		startX = e.targetTouches[0].pageX;
		clearInterval(timer);
	})

	ul.addEventListener('touchmove', function(e) {
		//计算移动距离
		moveX = e.targetTouches[0].pageX - startX;
		//移动盒子	原来合资的位置+手指移动的距离
		var translateX = -index * focusWidth + moveX;
		//手指拖动的时候,不需要动画效果,所以取消过度效果
		ul.style.transition = 'none';
		ul.style.transform = 'translateX(' + translateX + 'px)';
		e.preventDefault(); // 阻止滚动屏幕的行为
		flag = true;
	})

	ul.addEventListener('touchend', function() {
		//移动过才进行计算
		if (flag) {
			//如果移动距离大于50像素,则播放下一张
			if (Math.abs(moveX) > 50) {
				//右划--播放上一张--正数
				if (moveX > 0) {
					index--;
				} else {
					//左划--播放下一张--负数
					index++;
				}
			}
			var translateX = -index * focusWidth;
			ul.style.transition = 'all .3s';
			ul.style.transform = 'translateX(' + translateX + 'px)';
		}
		//手指离开后,重新开启定时器
		clearInterval(timer);
		timer = setInterval(function() {
			index++;
			var translateX = -index * focusWidth;
			ul.style.transform = 'translateX(' + translateX + 'px)';
			ul.style.transition = 'all .3s';
		}, 2000);
	})

	//展示返回顶部
	var goBack = document.querySelector('.goBack');
	var nav = document.querySelector('nav');
	window.addEventListener('scroll', function() {
		var pageScrollY = window.pageYOffset;
		var navY = nav.offsetTop;

		if (pageScrollY > navY) {
			//显示返回顶部
			goBack.style.display = 'block';
		} else {
			goBack.style.display = 'none';
		}
	});


	goBack.addEventListener('click', function() {
		window.scroll(0, 0);
	})

})
